<template lang="">
  <div>
<el-container style="height: 100vh; border: 1px solid #eee">
  <el-aside width="210px" style="background-color: rgb(238, 241, 246)">
    <h2 class="title-wrap"> 博客后台管理系统 </h2>
   <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="/adminArticleList" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router >
  <el-menu-item index="/adminArticleList" router>
    <i class="el-icon-user"></i>
    <span slot="title">文章</span>
  </el-menu-item>
    <el-menu-item index="/addarticle" router>
    <i class="el-icon-user"></i>
    <span slot="title">发文章</span>
  </el-menu-item>
</el-menu>
  </el-aside>

  <el-container>
    <el-header style="text-align: right; font-size: 17px">
        <i class="el-icon-setting" style="margin-right:10px;cursor:pointer;color:blue " @click="signOut">退出</i>
         <span>用户:  {{user.username}}</span>
    </el-header>
    <el-main>
         <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {
      isCollapse: false

    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created () {
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    async signOut () {
      // 清空token
      await this.$store.dispatch('removeToken')
      await this.$store.dispatch('removeUser')
      this.$message.success('退出成功！')
      this.$router.push('/login')
    }
  }
}

</script>
<style lang="less" scoped>

</style>
